| Android 横屏 android 横屏 兼容 模式 | 您所在的位置：网站首页 › android 强制 竖屏 › Android 横屏 android 横屏 兼容 模式 |
Android 横屏 android 横屏 兼容 模式
|
前言 通常我们在写wap的时候 横竖屏切换会使用到@media媒体查询来实现的。但我最近在一个android的项目，在webview使用媒体查询来做横竖屏区分。点击input输入框，会显示android的软键盘，而这会导致本来是竖屏的界面，变成横屏的。 @media all and (orientation : landscape) { //横屏} @media all and (orientation : portrait){ //竖屏 }
出现这个问题我们首先要分析portrait和landscape这个2个是怎样区分的。portrait是通过输出设备中的页面可见区域高度大于或等于宽度，landscape是除portrait值情况外，都是landscape。而软键盘出现会改变可见区域的尺寸，导致变成竖屏转成横屏模式。 名词 说明 portrait 指定输出设备中的页面可见区域高度大于或等于宽度 landscape 除portrait值情况外，都是landscape 如何解决通过网上搜索发现其他人也遇到同样的问题，早就有人提出完美解决办法，是通过@media媒体查询中aspect-ratio（输出设备中的页面可见区域宽度与高度的比率），通过设置小于13/9比率为横屏，大于13/9比率就为竖屏。通过比率来区分横竖屏，可以有效地兼容软键盘出现的问题。 @media screen and (min-aspect-ratio: 13/9){ } // landscape @media screen and (max-aspect-ratio: 13/9){ } // portrait
|
【本文地址】
公司简介
联系我们